<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Picker | Framework7 Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="Picker | Framework7 Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-demo-device docs-demo-device-ios">
          <div class="docs-demo-device-buttons"><a class="active" data-theme="ios">iOS</a><a data-theme="md">Android</a></div>
          <div class="docs-demo-device-iframe">
            <iframe width="320" height="548" frameborder="0" scrolling="on"></iframe>
            <div class="fade-overlay"></div>
          </div>
          <div class="docs-demo-device-android-buttons">
            <div class="triangle"></div>
            <div class="circle"></div>
            <div class="square"></div>
          </div>
        </div>
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App HTML Layout</a></li>
                <li><a href="rtl-layout.html">RTL Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Events</div>
              <ul>
                <li><a href="events.html">Events</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Router / Navigation</div>
              <ul>
                <li><a href="routes.html">Routes</a></li>
                <li><a href="router-component.html">Router Component</a></li>
                <li><a href="view.html#router-api-methods-properties">Router API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Components</div>
              <ul>
                <li><a href="app.html">App / Core</a></li>
                <li><a href="accordion.html">Accordion / Collapsible</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="autocomplete.html">Autocomplete</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="calendar.html">Calendar / Datepicker</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="data-table.html">Data Table</a></li>
                <li><a href="dialog.html">Dialog</a></li>
                <li><a href="elevation.html">Elevation</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="form.html">Form Data / Storage</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icons.html">Icons</a></li>
                <li><a href="infinite-scroll.html">Infinite Scroll</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="lazy-load.html">Lazy Load</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="notification.html">Notification</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="picker.html">Picker</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="pull-to-refresh.html">Pull to Refresh</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable-list.html">Sortable List</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="timeline.html">Timeline</a></li>
                <li><a href="toast.html">Toast</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="tooltip.html">Tooltip</a></li>
                <li><a href="vi.html">Video Intelligence (vi)</a></li>
                <li><a href="view.html">View / Router</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Framework7 Icons</div>
              <ul>
                <li><a href="/icons/">Framework7 Icons Cheatsheet</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Styling</div>
              <ul>
                <li><a href="iphone-x.html">iPhone X</a></li>
                <li><a href="color-themes.html">Color Themes</a></li>
                <li><a href="typography.html">Typography</a></li>
                <li><a href="hairlines.html">Hairlines</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Dom7</div>
              <ul>
                <li><a href="dom7.html">Dom7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Template7</div>
              <ul>
                <li><a href="template7.html">Template7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Fast Clicks</div>
              <ul>
                <li><a href="fast-clicks.html">Fast Clicks</a></li>
                <li><a href="active-state.html">Active State</a></li>
                <li><a href="tap-hold.html">Tap Hold Event (Long Tap)</a></li>
                <li><a href="touch-ripple.html">Touch Ripple (MD Theme)</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Utilities</div>
              <ul>
                <li><a href="request.html">Request / Ajax</a></li>
                <li><a href="utils.html">Utils</a></li>
                <li><a href="device.html">Device</a></li>
                <li><a href="support.html">Support</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Plugins API</div>
              <ul>
                <li><a href="plugins-api.html">Plugins API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Lazy Modules</div>
              <ul>
                <li><a href="lazy-modules.html">Lazy Modules</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Custom Build</div>
              <ul>
                <li><a href="custom-build.html">Custom Build</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>Picker</h1>
          <ul class="docs-index"></ul>
          <p>Picker is a powerful component that allows you to create custom overlay pickers which looks like iOS native picker.</p>
          <p>Picker could be used as inline component or as overlay. Overlay Picker will be automatically converted to Popover on tablets (iPad).</p>
          <h2>Picker App Methods</h2>
          <p>Let's look at related App methods to work with Picker:</p>
          <div class="method-wrap">
            <p><span class="method">app.picker.create(<span>parameters</span>)</span>- create Picker instance</p>
            <ul class="method-parameters">
              <li><span class="parameter">parameters</span> - <span class="parameter-type">object</span>. Object with picker parameters</li>
            </ul>
            <p class="method-returns">Method returns created Picker's instance</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.picker.destroy(<span>el</span>)</span>- destroy Picker instance</p>
            <ul class="method-parameters">
              <li><span class="parameter">el</span> - <span class="parameter-type">HTMLElement</span> or <span class="parameter-type">string</span> (with CSS Selector) or <span class="parameter-type">object</span>. Picker element or Picker instance to destroy.</li>
            </ul>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.picker.get(<span>el</span>)</span>- get Picker instance by HTML element</p>
            <ul class="method-parameters">
              <li><span class="parameter">el</span> - <span class="parameter-type">HTMLElement</span> or <span class="parameter-type">string</span> (with CSS Selector). Picker element.</li>
            </ul>
            <p class="method-returns">Method returns Picker's instance</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.picker.close(<span>el</span>)</span>- close Picker</p>
            <ul class="method-parameters">
              <li><span class="parameter">el</span> - <span class="parameter-type">HTMLElement</span> or <span class="parameter-type">string</span> (with CSS Selector). Picker element to close.</li>
            </ul>
            <p class="method-returns">Method returns Picker's instance</p>
          </div>
          <p>For example:</p><pre><code class="js"><span class="token keyword">var</span> picker <span class="token operator">=</span> app<span class="token punctuation">.</span>picker<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  inputEl<span class="token punctuation">:</span> <span class="token string">'#picker-input'</span><span class="token punctuation">,</span>
  cols<span class="token punctuation">:</span> <span class="token punctuation">[</span>
     <span class="token punctuation">{</span>
       values<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'apple'</span><span class="token punctuation">,</span> <span class="token string">'orange'</span><span class="token punctuation">,</span> <span class="token string">'bananna'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
       displayValues<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'Apple'</span><span class="token punctuation">,</span> <span class="token string">'Orange'</span><span class="token punctuation">,</span> <span class="token string">'Bananna'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
     <span class="token punctuation">}</span>
   <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <h2>Picker Parameters</h2>
          <p>Let's look on list of all available Picker parameters:</p>
          <table class="params-table">
            <thead>
              <tr>
                <th>Parameter</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>rotateEffect</td>
                <td>boolean</td>
                <td>false</td>
                <td>Enables 3D rotate effect</td>
              </tr>
              <tr>
                <td>momentumRatio</td>
                <td>number</td>
                <td>7</td>
                <td>Larger values produces more momentum when you release picker after fast touch and move</td>
              </tr>
              <tr>
                <td>updateValuesOnMomentum</td>
                <td>boolean</td>
                <td>false</td>
                <td>Updates picker and input values during momentum</td>
              </tr>
              <tr>
                <td>updateValuesOnTouchmove</td>
                <td>boolean</td>
                <td>true</td>
                <td>Updates picker and input values during touch move</td>
              </tr>
              <tr>
                <td>freeMode</td>
                <td>boolean</td>
                <td>false</td>
                <td>Disables snapping on values</td>
              </tr>
              <tr>
                <td>value</td>
                <td>array</td>
                <td></td>
                <td>Array with initial values. Each array item represents value of related column</td>
              </tr>
              <tr>
                <td>formatValue</td>
                <td>function (values, displayValues)</td>
                <td></td>
                <td>Function to format input value, should return new/formatted string value. <b>values</b> and <b>displayValues</b> are arrays where each item represents value/display value of related column</td>
              </tr>
              <tr>
                <td>cols</td>
                <td>array</td>
                <td></td>
                <td>Array with columns. Each array item represents object with column parameters</td>
              </tr>
              <tr>
                <th colspan="4">Container/opener-specific parameters</th>
              </tr>
              <tr>
                <td>containerEl</td>
                <td>string<br>HTMLElement</td>
                <td></td>
                <td>String with CSS selector or HTMLElement where to place generated Picker HTML. <b>Use only for inline picker</b></td>
              </tr>
              <tr>
                <td>openIn</td>
                <td>string</td>
                <td>auto</td>
                <td>Can be <code>auto</code>, <code>popover</code> (to open picker in popover), <code>sheet</code> (to open in sheet modal). In case of <code>auto</code> will open in sheet modal on small screens and in popover on large screens.</td>
              </tr>
              <tr>
                <td>inputEl</td>
                <td>string or HTMLElement</td>
                <td></td>
                <td>String with CSS selector or HTMLElement with related input element</td>
              </tr>
              <tr>
                <td>scrollToInput</td>
                <td>boolean</td>
                <td>true</td>
                <td>Scroll viewport (page-content) to input when picker opened</td>
              </tr>
              <tr>
                <td>inputReadOnly</td>
                <td>boolean</td>
                <td>true</td>
                <td>Sets "readonly" attribute on specified input</td>
              </tr>
              <tr>
                <td>cssClass</td>
                <td>string</td>
                <td></td>
                <td>Additional CSS class name to be set on picker element</td>
              </tr>
              <tr>
                <td>closeByOutsideClick</td>
                <td>boolean</td>
                <td>true</td>
                <td>If enabled, picker will be closed by clicking outside of picker or related input element</td>
              </tr>
              <tr>
                <td>toolbar</td>
                <td>boolean</td>
                <td>true</td>
                <td>Enables picker toolbar</td>
              </tr>
              <tr>
                <td>toolbarCloseText</td>
                <td>string</td>
                <td>Done</td>
                <td>Text for Done/Close toolbar button</td>
              </tr>
              <tr>
                <td>routableModals</td>
                <td>boolean</td>
                <td>true</td>
                <td>Will add opened picker to router history which gives ability to close picker by going back in router history and set current route to the picker modal</td>
              </tr>
              <tr>
                <td>url</td>
                <td>string</td>
                <td>select/</td>
                <td>Picker modal URL that will be set as a current route</td>
              </tr>
              <tr>
                <td>view</td>
                <td>object</td>
                <td></td>
                <td>View where to set routing when <code>routableModals</code> enabled. Defaults to parent view of <code>inputEl</code> or main view if not found parent view</td>
              </tr>
              <tr>
                <th colspan="4">Render Functions</th>
              </tr>
              <tr>
                <td>renderToolbar</td>
                <td>function</td>
                <td></td>
                <td>Function to render toolbar. Must return toolbar HTML string</td>
              </tr>
              <tr>
                <td>render</td>
                <td>function</td>
                <td></td>
                <td>Function to render whole picker. Must return picker full HTML string</td>
              </tr>
              <tr>
                <th colspan="4">Events</th>
              </tr>
              <tr>
                <td>on</td>
                <td>object</td>
                <td></td>
                <td>
                  Object with events handlers. For example:<pre><code class="js"><span class="token keyword">var</span> picker <span class="token operator">=</span> app<span class="token punctuation">.</span>picker<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token operator">...</span>
  on<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">opened</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Picker opened'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="important-note">
            <p>Note that all following parameters can be used in global app parameters under <code>picker</code> property to set defaults for all pickers. For example:</p><pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  picker<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    rotateEffect<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    openIn<span class="token punctuation">:</span> <span class="token string">'popover'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          </div>
          <h3>Column Parameters</h3>
          <p>When we configure Picker we need to pass <code>cols</code> parameter. It is an array where each item is an object with column parameters:</p>
          <table class="params-table">
            <thead>
              <tr>
                <th>Parameter</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>values</td>
                <td>array</td>
                <td></td>
                <td>Array with string columns values</td>
              </tr>
              <tr>
                <td>displayValues</td>
                <td>array</td>
                <td></td>
                <td>Array with string columns values that will be displayed in Picker. If not specified, it will display values from <b>values</b> parameter</td>
              </tr>
              <tr>
                <td>cssClass</td>
                <td>string</td>
                <td></td>
                <td>Additional CSS class name to be set on column HTML container</td>
              </tr>
              <tr>
                <td>textAlign</td>
                <td>string</td>
                <td></td>
                <td>Text alignment of column values, could be "left", "center" or "right"</td>
              </tr>
              <tr>
                <td>width</td>
                <td>number</td>
                <td></td>
                <td>Column width in px. Useful if you need to fix column widths in picker with dependent columns. By default, calculated automatically</td>
              </tr>
              <tr>
                <td>divider</td>
                <td>boolean</td>
                <td>false</td>
                <td>Defines column that should be used as a visual divider, that doesn't have any values</td>
              </tr>
              <tr>
                <td>content</td>
                <td>string</td>
                <td></td>
                <td>Should be specified for divider-column (<code>divider:true</code>) with content of the column</td>
              </tr>
              <tr>
                <td>onChange</td>
                <td>function(picker, value, displayValue)</td>
                <td></td>
                <td>Callback function that will be executed when picker value changed.</td>
              </tr>
            </tbody>
          </table>
          <h2>Picker Methods & Properties</h2>
          <p>After we initialize Picker we have its initialized instance in variable (like <code>picker</code> variable in examples above) with helpful methods and properties:</p>
          <table class="methods-table">
            <tbody>
              <tr>
                <th colspan="2">Properties</th>
              </tr>
              <tr>
                <td>picker.app</td>
                <td>Link to global app instance</td>
              </tr>
              <tr>
                <td>picker.containerEl</td>
                <td>Picker wrapping container HTML element (when inline picker is in use)</td>
              </tr>
              <tr>
                <td>picker.$containerEl</td>
                <td>Dom7 instance with picker wrapping container HTML element (when inline picker is in use)</td>
              </tr>
              <tr>
                <td>picker.el</td>
                <td>Picker HTML element</td>
              </tr>
              <tr>
                <td>picker.$el</td>
                <td>Dom7 instance with picker HTML element</td>
              </tr>
              <tr>
                <td>picker.inputEl</td>
                <td>Picker input HTML element (passed in <code>inputEl</code> parameter)</td>
              </tr>
              <tr>
                <td>picker.$inputEl</td>
                <td>Dom7 instance with picker input HTML element (passed in <code>inputEl</code> parameter)</td>
              </tr>
              <tr>
                <td>picker.value</td>
                <td>Array where each item represents current selected value for each column</td>
              </tr>
              <tr>
                <td>picker.cols</td>
                <td>Array with specified Picker columns. Each column also has its own methods and properties (look below)</td>
              </tr>
              <tr>
                <td>picker.opened</td>
                <td><code>true</code> if Picker is currently opened</td>
              </tr>
              <tr>
                <td>picker.inline</td>
                <td><code>true</code> when inline picker is in use</td>
              </tr>
              <tr>
                <td>picker.url</td>
                <td>Picker URL (that was passed in <code>url</code> parameter)</td>
              </tr>
              <tr>
                <td>picker.view</td>
                <td>Picker View (that was passed in <code>view</code> parameter) or found parent view</td>
              </tr>
              <tr>
                <td>picker.params</td>
                <td>Object with initialization parameters</td>
              </tr>
              <tr>
                <th colspan="2">Methods</th>
              </tr>
              <tr>
                <td>picker.setValue(values, duration)</td>
                <td>Set new picker value. <code>values</code> is array where each item represents value for each column. <code>duration</code> - transition duration in ms</td>
              </tr>
              <tr>
                <td>picker.getValue()</td>
                <td>Returns current picker value</td>
              </tr>
              <tr>
                <td>picker.addValue()</td>
                <td>Adds value to the values array. Useful in case if multiple selection is enabled (with <code>multiple: true</code> parameter)</td>
              </tr>
              <tr>
                <td>picker.open()</td>
                <td>Open Picker</td>
              </tr>
              <tr>
                <td>picker.close()</td>
                <td>Close Picker</td>
              </tr>
              <tr>
                <td>picker.destroy()</td>
                <td>Destroy Picker instance and remove all events</td>
              </tr>
              <tr>
                <td>picker.on(<span>event</span>, <span>handler</span>)</td>
                <td>Add event handler</td>
              </tr>
              <tr>
                <td>picker.once(<span>event</span>, <span>handler</span>)</td>
                <td>Add event handler that will be removed after it was fired</td>
              </tr>
              <tr>
                <td>picker.off(<span>event</span>, <span>handler</span>)</td>
                <td>Remove event handler</td>
              </tr>
              <tr>
                <td>picker.off(<span>event</span>)</td>
                <td>Remove all handlers for specified event</td>
              </tr>
              <tr>
                <td>picker.emit(<span>event</span>, <span>...args</span>)</td>
                <td>Fire event on instance</td>
              </tr>
            </tbody>
          </table>
          <h3>Column Methods & Properties</h3>
          <p>Each column in <code>picker.cols</code> array also has its own useful methods and properties.</p><pre><code class="js"><span class="token comment">//Get first column</span>
<span class="token keyword">var</span> col <span class="token operator">=</span> picker<span class="token punctuation">.</span>cols<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</pre></code>
          <table class="methods-table">
            <tbody>
              <tr>
                <th colspan="2">Properties</th>
              </tr>
              <tr>
                <td>col.el</td>
                <td>Column HTML element</td>
              </tr>
              <tr>
                <td>col.$el</td>
                <td>Dom7 instance with column HTML container</td>
              </tr>
              <tr>
                <td>col.items</td>
                <td>Dom7 instance with column items HTML elements</td>
              </tr>
              <tr>
                <td>col.value</td>
                <td>Currently selected column value</td>
              </tr>
              <tr>
                <td>col.displayValue</td>
                <td>Currently selected column display value</td>
              </tr>
              <tr>
                <td>col.activeIndex</td>
                <td>Index number of currently selected/active item</td>
              </tr>
              <tr>
                <th colspan="2">Methods</th>
              </tr>
              <tr>
                <td>col.setValue(value, duration)</td>
                <td>Set new value for current column. <code>value</code> is a new value, <code>duration</code> - transition duration in ms</td>
              </tr>
              <tr>
                <td>col.replaceValues(values, displayValues)</td>
                <td>Replace column values and displayValues with new ones</td>
              </tr>
            </tbody>
          </table>
          <h2>Picker Events</h2>
          <p>Picker will fire the following DOM events on picker element and events on app and picker instance:</p>
          <h3>DOM Events</h3>
          <table class="events-table">
            <thead>
              <tr>
                <th>Event</th>
                <th>Target</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>picker:open</td>
                <td>Picker Element<span>&lt;div class="picker"&gt;</span></td>
                <td>Event will be triggered when Picker starts its opening animation</td>
              </tr>
              <tr>
                <td>picker:opened</td>
                <td>Picker Element<span>&lt;div class="picker"&gt;</span></td>
                <td>Event will be triggered after Picker completes its opening animation</td>
              </tr>
              <tr>
                <td>picker:close</td>
                <td>Picker Element<span>&lt;div class="picker"&gt;</span></td>
                <td>Event will be triggered when Picker starts its closing animation</td>
              </tr>
              <tr>
                <td>picker:closed</td>
                <td>Picker Element<span>&lt;div class="picker"&gt;</span></td>
                <td>Event will be triggered after Picker completes its closing animation</td>
              </tr>
            </tbody>
          </table>
          <h3>App and Picker Instance Events</h3>
          <p>Picker instance emits events on both self instance and app instance. App instance events has same names prefixed with <code>picker</code>.</p>
          <table class="events-table">
            <thead>
              <tr>
                <th>Event</th>
                <th>Target</th>
                <th>Arguments</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>change</td>
                <td>picker</td>
                <td rowspan="2"><span>(picker, value, displayValue)</span></td>
                <td rowspan="2">Event will be triggered when picker value changes</td>
              </tr>
              <tr>
                <td>pickerChange</td>
                <td>app</td>
              </tr>
              <tr>
                <td>init</td>
                <td>picker</td>
                <td rowspan="2"><span>(picker)</span></td>
                <td rowspan="2">Event will be triggered when picker initialized</td>
              </tr>
              <tr>
                <td>pickerInit</td>
                <td>app</td>
              </tr>
              <tr>
                <td>open</td>
                <td>picker</td>
                <td rowspan="2"><span>(picker)</span></td>
                <td rowspan="2">Event will be triggered when Picker starts its opening animation. As an argument event handler receives picker instance</td>
              </tr>
              <tr>
                <td>pickerOpen</td>
                <td>app</td>
              </tr>
              <tr>
                <td>opened</td>
                <td>picker</td>
                <td rowspan="2"><span>(picker)</span></td>
                <td rowspan="2">Event will be triggered after Picker completes its opening animation. As an argument event handler receives picker instance</td>
              </tr>
              <tr>
                <td>pickerOpened</td>
                <td>app</td>
              </tr>
              <tr>
                <td>close</td>
                <td>picker</td>
                <td rowspan="2"><span>(picker)</span></td>
                <td rowspan="2">Event will be triggered when Picker starts its closing animation. As an argument event handler receives picker instance</td>
              </tr>
              <tr>
                <td>pickerClose</td>
                <td>app</td>
              </tr>
              <tr>
                <td>closed</td>
                <td>picker</td>
                <td rowspan="2"><span>(picker)</span></td>
                <td rowspan="2">Event will be triggered after Picker completes its closing animation. As an argument event handler receives picker instance</td>
              </tr>
              <tr>
                <td>pickerClosed</td>
                <td>app</td>
              </tr>
              <tr>
                <td>beforeDestroy</td>
                <td>picker</td>
                <td rowspan="2"><span>(picker)</span></td>
                <td rowspan="2">Event will be triggered right before Picker instance will be destroyed. As an argument event handler receives picker instance</td>
              </tr>
              <tr>
                <td>pickerBeforeDestroy</td>
                <td>app</td>
              </tr>
            </tbody>
          </table>
          <div class="with-device">
            <h2 data-device-preview="../docs-demos/core/picker.html">Examples</h2>
            <h4>Picker With Single Value</h4><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Picker with single value<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list no-hairlines-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-content item-input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-input-wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your iOS device<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>readonly<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-picker-device<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></code><pre><code class="js"><span class="token keyword">var</span> pickerDevice <span class="token operator">=</span> app<span class="token punctuation">.</span>picker<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  inputEl<span class="token punctuation">:</span> <span class="token string">'#demo-picker-device'</span><span class="token punctuation">,</span>
  cols<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
      values<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'iPhone 4'</span><span class="token punctuation">,</span> <span class="token string">'iPhone 4S'</span><span class="token punctuation">,</span> <span class="token string">'iPhone 5'</span><span class="token punctuation">,</span> <span class="token string">'iPhone 5S'</span><span class="token punctuation">,</span> <span class="token string">'iPhone 6'</span><span class="token punctuation">,</span> <span class="token string">'iPhone 6 Plus'</span><span class="token punctuation">,</span> <span class="token string">'iPad 2'</span><span class="token punctuation">,</span> <span class="token string">'iPad Retina'</span><span class="token punctuation">,</span> <span class="token string">'iPad Air'</span><span class="token punctuation">,</span> <span class="token string">'iPad mini'</span><span class="token punctuation">,</span> <span class="token string">'iPad mini 2'</span><span class="token punctuation">,</span> <span class="token string">'iPad mini 3'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre></code>
            <h4>Two Values and 3D-Rotate Effect</h4><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2 values and 3d-rotate effect<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list no-hairlines-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-content item-input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-input-wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Describe yourself<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>readonly<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-picker-describe<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></code><pre><code class="js"><span class="token keyword">var</span> pickerDescribe <span class="token operator">=</span> app<span class="token punctuation">.</span>picker<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  inputEl<span class="token punctuation">:</span> <span class="token string">'#demo-picker-describe'</span><span class="token punctuation">,</span>
    rotateEffect<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    cols<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        textAlign<span class="token punctuation">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
        values<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token string">'Super Amazing Bat Iron Rocket Lex Beautiful Wonderful Raining Happy Funny Cool Hot'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        values<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token string">'Man Luthor Woman Boy Girl Person Cutie Babe Raccoon'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre></code>
            <h4>Dependent Values</h4><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Dependent values<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list no-hairlines-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-content item-input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-input-wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your car<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>readonly<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-picker-dependent<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
</pre></code><pre><code class="js"><span class="token keyword">var</span> carVendors <span class="token operator">=</span> <span class="token punctuation">{</span>
  Japanese <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'Honda'</span><span class="token punctuation">,</span> <span class="token string">'Lexus'</span><span class="token punctuation">,</span> <span class="token string">'Mazda'</span><span class="token punctuation">,</span> <span class="token string">'Nissan'</span><span class="token punctuation">,</span> <span class="token string">'Toyota'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  German <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'Audi'</span><span class="token punctuation">,</span> <span class="token string">'BMW'</span><span class="token punctuation">,</span> <span class="token string">'Mercedes'</span><span class="token punctuation">,</span> <span class="token string">'Volkswagen'</span><span class="token punctuation">,</span> <span class="token string">'Volvo'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  American <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'Cadillac'</span><span class="token punctuation">,</span> <span class="token string">'Chrysler'</span><span class="token punctuation">,</span> <span class="token string">'Dodge'</span><span class="token punctuation">,</span> <span class="token string">'Ford'</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> pickerDependent <span class="token operator">=</span> app<span class="token punctuation">.</span>picker<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  inputEl<span class="token punctuation">:</span> <span class="token string">'#demo-picker-dependent'</span><span class="token punctuation">,</span>
  rotateEffect<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token function-variable function">formatValue</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">values</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword-block">return</span> values<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  cols<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      textAlign<span class="token punctuation">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
      values<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'Japanese'</span><span class="token punctuation">,</span> <span class="token string">'German'</span><span class="token punctuation">,</span> <span class="token string">'American'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token function-variable function">onChange</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">picker<span class="token punctuation">,</span> country</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">if</span><span class="token punctuation">(</span>picker<span class="token punctuation">.</span>cols<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>replaceValues<span class="token punctuation">)</span><span class="token punctuation">{</span>
          picker<span class="token punctuation">.</span>cols<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">replaceValues</span><span class="token punctuation">(</span>carVendors<span class="token punctuation">[</span>country<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      values<span class="token punctuation">:</span> carVendors<span class="token punctuation">.</span>Japanese<span class="token punctuation">,</span>
      width<span class="token punctuation">:</span> <span class="token number">160</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre></code>
            <h4>Custom toolbar</h4><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Custom toolbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list no-hairlines-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-content item-input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-input-wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Describe yourself<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>readonly<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-picker-custom-toolbar<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
</pre></code><pre><code class="js"><span class="token keyword">var</span> pickerCustomToolbar <span class="token operator">=</span> app<span class="token punctuation">.</span>picker<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  inputEl<span class="token punctuation">:</span> <span class="token string">'#demo-picker-custom-toolbar'</span><span class="token punctuation">,</span>
  rotateEffect<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token function-variable function">renderToolbar</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword-block">return</span> <span class="token string">'&lt;div class="toolbar">'</span> <span class="token operator">+</span>
      <span class="token string">'&lt;div class="toolbar-inner">'</span> <span class="token operator">+</span>
        <span class="token string">'&lt;div class="left">'</span> <span class="token operator">+</span>
          <span class="token string">'&lt;a href="#" class="link toolbar-randomize-link">Randomize&lt;/a>'</span> <span class="token operator">+</span>
        <span class="token string">'&lt;/div>'</span> <span class="token operator">+</span>
        <span class="token string">'&lt;div class="right">'</span> <span class="token operator">+</span>
          <span class="token string">'&lt;a href="#" class="link sheet-close popover-close">That\'s me&lt;/a>'</span> <span class="token operator">+</span>
        <span class="token string">'&lt;/div>'</span> <span class="token operator">+</span>
      <span class="token string">'&lt;/div>'</span> <span class="token operator">+</span>
    <span class="token string">'&lt;/div>'</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  cols<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      values<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'Mr'</span><span class="token punctuation">,</span> <span class="token string">'Ms'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      textAlign<span class="token punctuation">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
      values<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token string">'Super Amazing Bat Iron Rocket Lex Beautiful Wonderful Raining Happy Funny Cool Hot'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      values<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token string">'Man Luthor Woman Boy Girl Person Cutie Babe Raccoon'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  on<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">open</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">picker</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      picker<span class="token punctuation">.</span>$el<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'.toolbar-randomize-link'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> col0Values <span class="token operator">=</span> picker<span class="token punctuation">.</span>cols<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>values<span class="token punctuation">;</span>
        <span class="token keyword">var</span> col0Random <span class="token operator">=</span> col0Values<span class="token punctuation">[</span><span class="token built-in">Math</span><span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token built-in">Math</span><span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> col0Values<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

        <span class="token keyword">var</span> col1Values <span class="token operator">=</span> picker<span class="token punctuation">.</span>cols<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>values<span class="token punctuation">;</span>
        <span class="token keyword">var</span> col1Random <span class="token operator">=</span> col1Values<span class="token punctuation">[</span><span class="token built-in">Math</span><span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token built-in">Math</span><span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> col1Values<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

        <span class="token keyword">var</span> col2Values <span class="token operator">=</span> picker<span class="token punctuation">.</span>cols<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span>values<span class="token punctuation">;</span>
        <span class="token keyword">var</span> col2Random <span class="token operator">=</span> col2Values<span class="token punctuation">[</span><span class="token built-in">Math</span><span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token built-in">Math</span><span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> col2Values<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

        picker<span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span><span class="token punctuation">[</span>col0Random<span class="token punctuation">,</span> col1Random<span class="token punctuation">,</span> col2Random<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre></code>
            <h4>Inline Picker / Date-time</h4><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Inline Picker / Date-time<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list no-margin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-content item-input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-input-wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Date Time<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>readonly<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-picker-date<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block block-strong no-padding no-margin margin-bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-picker-date-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
</pre></code><pre><code class="js"><span class="token keyword">var</span> today <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> pickerInline <span class="token operator">=</span> app<span class="token punctuation">.</span>picker<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  containerEl<span class="token punctuation">:</span> <span class="token string">'#demo-picker-date-container'</span><span class="token punctuation">,</span>
  inputEl<span class="token punctuation">:</span> <span class="token string">'#demo-picker-date'</span><span class="token punctuation">,</span>
  toolbar<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  rotateEffect<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  value<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    today<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    today<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    today<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    today<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    today<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&lt;</span> <span class="token number">10</span> <span class="token operator">?</span> <span class="token string">'0'</span> <span class="token operator">+</span> today<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> today<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token function-variable function">formatValue</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">values<span class="token punctuation">,</span> displayValues</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword-block">return</span> displayValues<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> values<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">', '</span> <span class="token operator">+</span> values<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> values<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> values<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  cols<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token comment">// Months</span>
    <span class="token punctuation">{</span>
      values<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token string">'0 1 2 3 4 5 6 7 8 9 10 11'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      displayValues<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token string">'January February March April May June July August September October November December'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      textAlign<span class="token punctuation">:</span> <span class="token string">'left'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// Days</span>
    <span class="token punctuation">{</span>
      values<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">9</span><span class="token punctuation">,</span><span class="token number">10</span><span class="token punctuation">,</span><span class="token number">11</span><span class="token punctuation">,</span><span class="token number">12</span><span class="token punctuation">,</span><span class="token number">13</span><span class="token punctuation">,</span><span class="token number">14</span><span class="token punctuation">,</span><span class="token number">15</span><span class="token punctuation">,</span><span class="token number">16</span><span class="token punctuation">,</span><span class="token number">17</span><span class="token punctuation">,</span><span class="token number">18</span><span class="token punctuation">,</span><span class="token number">19</span><span class="token punctuation">,</span><span class="token number">20</span><span class="token punctuation">,</span><span class="token number">21</span><span class="token punctuation">,</span><span class="token number">22</span><span class="token punctuation">,</span><span class="token number">23</span><span class="token punctuation">,</span><span class="token number">24</span><span class="token punctuation">,</span><span class="token number">25</span><span class="token punctuation">,</span><span class="token number">26</span><span class="token punctuation">,</span><span class="token number">27</span><span class="token punctuation">,</span><span class="token number">28</span><span class="token punctuation">,</span><span class="token number">29</span><span class="token punctuation">,</span><span class="token number">30</span><span class="token punctuation">,</span><span class="token number">31</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// Years</span>
    <span class="token punctuation">{</span>
      values<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token keyword-block">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">1950</span><span class="token punctuation">;</span> i <span class="token operator">&lt;=</span> <span class="token number">2030</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
          <span class="token keyword-block">return</span> arr<span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// Space divider</span>
    <span class="token punctuation">{</span>
      divider<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      content<span class="token punctuation">:</span> <span class="token string">'&amp;nbsp;&amp;nbsp;'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// Hours</span>
    <span class="token punctuation">{</span>
      values<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token keyword-block">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;=</span> <span class="token number">23</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
          <span class="token keyword-block">return</span> arr<span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// Divider</span>
    <span class="token punctuation">{</span>
      divider<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      content<span class="token punctuation">:</span> <span class="token string">':'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// Minutes</span>
    <span class="token punctuation">{</span>
      values<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token keyword-block">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;=</span> <span class="token number">59</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>i <span class="token operator">&lt;</span> <span class="token number">10</span> <span class="token operator">?</span> <span class="token string">'0'</span> <span class="token operator">+</span> i <span class="token punctuation">:</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
          <span class="token keyword-block">return</span> arr<span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  on<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">change</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">picker<span class="token punctuation">,</span> values<span class="token punctuation">,</span> displayValues</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">var</span> daysInMonth <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>picker<span class="token punctuation">.</span>value<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span> picker<span class="token punctuation">.</span>value<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">*</span><span class="token number">1</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword-block">if</span> <span class="token punctuation">(</span>values<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">></span> daysInMonth<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        picker<span class="token punctuation">.</span>cols<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span>daysInMonth<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          </div>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>